<template>
  
    <div style="height:100vh; background: #ececec;">
      <!-- <div id="back">
        <img :src="back" height="100%" width="100%" style="height: 100vh; width: 100%;" />
      </div> -->
      
      <el-row :id="'login-contain'">
        <el-col :span="10">
          <img :src="logobg" height="200px" />
          <p style="line-height: 60px; margin-bottom: 0">
            湖北省流行病学调查平台（内部测试）
          </p>
        </el-col>
        <el-col :span="14" style="border-left: solid; padding-left: 10px;padding-right: 10px;height:100%;" >
          <el-form
            ref="form"
            :model="form"
            label-width="0"
            style="margin-top: 52px;"
          >
            <el-form-item>
              <el-row>
                <el-col :span="8"> 手机号： </el-col>
                <el-col :span="16">
                  <el-input
                    prefix-icon="el-icon-user-solid"
                    v-model="form.utel"
                    placeholder="请输入手机号"
                  ></el-input>
                </el-col>
              </el-row>
            </el-form-item>
            <el-form-item>
              <el-row>
                <el-col :span="8"> 密码： </el-col>
                <el-col :span="16">
                  <el-input
                    prefix-icon="el-icon-lock"
                    type="password"
                    v-model="form.upass"
                    autocomplete="off"
                    placeholder="请输入密码"
                  ></el-input>
                </el-col>
              </el-row>
            </el-form-item>
            <el-form-item>
              <el-row>
                <el-col :span="6"> 验证码： </el-col>
                <el-col :span="8">
                  <el-input
                    prefix-icon="el-icon-lock"
                    v-model="form.checkcode"
                    placeholder="请输入验证码"
                  />
                </el-col>
                <el-col :span="10">
                  <el-button
                    style="margin-left: 20px"
                    id="code"
                    @click="createCode"
                    type="info"
                    plain
                    size="mini"
                    class="verification1"
                  >
                    {{ checkCode }}
                  </el-button>
                </el-col>
              </el-row>
            </el-form-item>
            <el-form-item>
              <el-row :gutter="10">
                <el-col :span="12" :offset="6">
                  <el-button style="width: 100%" type="danger" @click="login" v-loading.fullscreen.lock="spinning"
                    >登录</el-button
                  >
                </el-col>
              </el-row>
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
    </div>
</template>

<script>
import { initConfigData, login } from "@/utils/http";
import { getBrowserInfo, getIpAddress } from '@/utils/utils';

export default {
  data() {
    return {
      msg: "",
      form: {
        utel: "",
        upass: "",
        checkcode: "",
      },
      isRegister: false,
      loading: null,
      img1: "",
      back: "",
      logo: "",
      bgimg: "",
      avter: "",
      logobg: "",
      checkCode: "",
      random: [],
      spinning: false,
    };
  },
  computed: {
    isPhone() {
      return this.$store.getters.phone;
    },
  },
  methods: {
    async login() {
      // this.$router.push({ path: "/" });
      try {
        this.spinning = true;
        // dev
        // if (
        //   this.form.checkcode.toUpperCase() !== this.checkCode.toUpperCase()
        // ) {
        //   this.$message.error("验证码错误！");
        //   this.createCode();
        //   this.loading.close();
        //   return;
        // }
        console.log(getIpAddress())
        console.log(getBrowserInfo())
        let data = await login(this.form.utel, this.form.upass, "tt", "tt");
        this.$store.commit("login", data);
        initConfigData('BASE')
          .then(res => {
            if(res.code === 0){
              this.$message.success('初始化数据成功！')
            }
            else{
              this.$message.error('初始化数据失败！')
            }
          })
        let path = decodeURIComponent(this.$route.query.redirect || "/");
        this.$router.push({ path: path });
      } catch (e) {
        this.$message.error("账号或密码错误！");
        this.createCode();
      } finally {
        this.spinning = false;
      }
    },
    register() {
      this.form.utel = "";
      this.form.upass = "";
      this.form.checkcode = "";
    },
    createCode() {
      let code = "";
      var codeLength = 4; //验证码的长度

      for (var i = 0; i < codeLength; i++) {
        //循环操作
        var index = Math.floor(Math.random() * this.random.length); //取得随机数的索引（0~35）
        code += this.random[index]; //根据索引取得随机数加到code上
      }
      this.checkCode = code; //把code值赋给验证码
    },
  },
  created() {
    for (var i = 0; i < 10; i++) {
      this.random.push(i);
    }
    for (var i = 65; i < 91; i++) {
      this.random.push(String.fromCharCode(i));
    }
    for (var i = 97; i < 123; i++) {
      this.random.push(String.fromCharCode(i));
    }
  },
  async mounted() {
    this.$store.commit("phone", document.body.clientWidth < 760);
    this.back = require("@/assets/background.jpg");
    this.avter = require("@/assets/login-portrait.png");
    this.logobg = require("@/assets/back_logo.png");
    this.createCode();
  },
};
</script>

<style>
#back {
  position: absolute;
  width: 100%;
  height: 100vh;
}
#login-contain {
  border-radius: 10px;
  padding: 20px;
  font-size: 24px;
  font-weight: bold;
  position: absolute;
  background-color: #fffffff2;
  width: 700PX;
  left: 1px;
  top: 1px;
  right: 1px;
  margin: auto;
  bottom: 1px;
  height: 400px;
  text-align: center;
  box-shadow: 0px 0px 18px 8px;
}
#code {
  font-size: 18px;
  letter-spacing: 3px;
  color: #031424;
  background: #f2f2f5;
}
</style>